$(function(){
    let mychart = echarts.init(document.querySelector('.fourBox .right'))
    var data = [
        {
            name: '标题样式1',
            value: 100,
            num: 1234,
        },
        {
            name: '标题样式2',
            value: 50,
            num: 5678,
        },
        {
            name: '标题样式3',
            value: 49,
            num: 9012,
        }
    ];
    
    var titleArr = [],
        seriesArr = [];
    colors = [
        ['#5B8FF9', '#E9EEF4'],
        ['#5AD8A6', '#E9EEF4'],
        ['#FFFF80', '#E9EEF4']
    ];
    data.forEach(function (item, index) {
        titleArr.push({
            text: item.num + '\n' +item.name,
            left: index * 33 + 15 + '%',
            top: '65%',
            textAlign: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: '16',
                color: 'white',
                textAlign: 'center',
            },
        });
        seriesArr.push({
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [25, 35],
            itemStyle: {
                normal: {
                    color: colors[index][0],
                    shadowColor: colors[index][0],
                    shadowBlur: 0,
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                },
            },
            hoverAnimation: false,
            center: [index *  33 + 15 + '%', '50%'],
            data: [
                {
                    value: item.value,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.value + '%';
                            },
                            position: 'center',
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold',
                                color: 'white',
                            },
                        },
                    },
                },
                {
                    value: 100 - item.value,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: colors[index][1],
                        },
                        emphasis: {
                            color: colors[index][1],
                        },
                    },
                },
            ],
        });
    });
    let option = {
        title: titleArr,
        series: seriesArr,
    };
    
    
mychart.setOption(option)
window.addEventListener('resize',function(){
    mychart.resize()
})


// 数据跳动
let num = 0
setInterval(() => {
    if(num>=1000000000) num = 0
    num += 12345
    $('.fourBox .bottom').text(num)

},1)
})